<template>
	<view class="container container333526">
		<u-form-item :borderBottom="false" v-if="globalData.isshow" class="diygw-col-24 baifangren-clz" labelPosition="top" prop="baifangren">
			<u-input @blur="listApi" :data-baifangren="baifangren" data-isself="1" :focus="baifangrenFocus" placeholder="请输入拜访人" v-model="baifangren"></u-input>
			<text @tap="navigateTo" data-type="listApi" :data-baifangren="baifangren" data-isself="1" class="diy-icon-search" style="color: #363636; font-size: 32rpx"></text>
		</u-form-item>
		<view v-if="list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
			<view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
				<text class="diygw-text-line2 diygw-col-24 text1-clz"> 拜访人:{{ item.baifangren }} </text>
				<text class="diygw-text-line2 diygw-col-24 text4-clz"> 申请公司:{{ item.gongsi }} </text>
				<text class="diygw-text-line2 diygw-col-24 text5-clz"> 申请人:{{ item.title }} </text>
				<text class="diygw-text-line2 diygw-col-24 text7-clz"> 同行人数:{{ item.number }} </text>
				<text class="diygw-text-line2 diygw-col-24 text8-clz"> 入厂时间:{{ item.shenqingshijian }} </text>
				<text v-if="item.remark" class="diygw-text-line3 diygw-col-24 text2-clz">
					{{ item.remark }}
				</text>
				<view class="flex flex-wrap diygw-col-24 justify-end items-center flex2-clz">
					<text @tap="navigateTo" data-type="page" data-url="/pages/index" :data-id="item.id" class="diygw-col-0 text6-clz"> 修改 </text>
					<text @tap="navigateTo" data-type="delApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text13-clz"> 删除 </text>
				</view>
			</view>
		</view>
		<view v-if="globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz">
			<image src="/static/zwjl.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image>
			<text class="diygw-col-0 text-clz"> 未找到任何数据 </text>
		</view>
		<view @touchmove.stop.prevent="" v-if="modal" class="diygw-modal basic" :class="modal" style="z-index: 1000000">
			<view class="diygw-dialog diygw-dialog-modal basis-lg">
				<view class="justify-end diygw-bar">
					<view class="content">
						{{ form.id ? '编辑产品' : '新增产品' }}
					</view>
					<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
						<text class="diy-icon-close"></text>
					</view>
				</view>
				<view>
					<view class="flex diygw-dialog-content">
						<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
							<u-form-item class="diygw-col-24" :required="true" label="标题" prop="title">
								<u-input :focus="formData.titleFocus" placeholder="请输入标题" v-model="form.title"></u-input>
							</u-form-item>
							<u-form-item class="diygw-col-24" label="备注" prop="remark">
								<u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="form.remark" type="textarea"></u-input>
							</u-form-item>
							<view class="flex diygw-col-24">
								<button @tap="navigateTo" data-type="clearFunction" class="diygw-btn red radius-xs flex-sub margin-xs button-button-clz">取消</button>
								<button @click="submitForm" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">保存</button>
							</view>
						</u-form>
					</view>
				</view>
			</view>
		</view>
		<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz">
			<view class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @tap="navigateTo" data-type="page" data-url="/pages/index">
				<text class="flex icon2 diygw-col-0 diy-icon-add"></text>
				<text class="diygw-col-0"> 新增申请人 </text>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false },
				listNum: 1,
				list: {
					rows: [
						{
							id: 0,
							title: '',
							gongsi: '',
							baifangren: '',
							number: 0,
							shenqingshijian: '',
							remark: '',
							status: null,
							createTime: '',
							updateTime: '',
							deleteTime: null
						}
					],
					total: 0,
					code: 0,
					msg: ''
				},
				del: {
					code: 200,
					msg: '删除成功'
				},
				baifangrenFocus: false,
				baifangren: '',
				modal: '',
				formRules: {
					title: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '标题不能为空'
						}
					]
				},
				form: {
					title: '',
					remark: ''
				},
				formData: {
					titleFocus: false
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);

			this.initShow();
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
		},
		methods: {
			async init() {
				await this.initResetform();
			},
			async initShow() {
				//强制重新刷新页面
				await this.listApi({ refresh: 1 });
			},
			// 列表数据 API请求方法
			async listApi(param) {
				let thiz = this;
				param = param || {};

				//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象
				if (param.refresh || typeof param != 'object') {
					this.listNum = 1;
				}

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/gc/shenqing/list';
				let http_data = {
					pageNum: this.listNum,
					pageSize: 10,
					baifangren: param.baifangren || this.baifangren,
					isself: param.isself || '1'
				};
				let http_header = {};

				if (this.userInfo.username == 'admin') {
					delete http_data['isself'];
				}

				let list = await this.$http.post(http_url, http_data, http_header, 'json');

				let datarows = list.rows;
				if (http_data.pageNum == 1) {
					this.list = list;
				} else if (datarows) {
					let rows = this.list.rows.concat(datarows);
					list.rows = rows;
					this.list = list;
				}
				if (datarows && datarows.length > 0) {
					this.listNum = this.listNum + 1;
				}
				this.globalData.isshow = true;
			},
			// 删除数据 API请求方法
			async delApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/gc/shenqing/del';
				let http_data = {
					id: param.id || this.item.id,
					index: param.index || this.index
				};
				let http_header = {};

				let flag = await this.showModal('是否确定删除该数据');
				if (!flag) {
					this.showToast('你已取消删');
					return;
				}

				let del = await this.$http.post(http_url, http_data, http_header, 'json');

				this.del = del;
				if (del.code == 200) {
					this.list.rows.splice(param.index, 1);
					this.list.total = this.list.rows.length;
					this.showToast('删除数据成功');
				} else {
					this.showToast('删除数据失败', 'error');
				}
			},
			initResetform() {
				this.initform = JSON.stringify(this.form);
				//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form
				//this.form = this.$tools.changeRowToForm(row,this.form)
			},
			resetForm() {
				this.form = JSON.parse(this.initform);
			},

			async submitForm(e) {
				this.$refs.formRef?.setRules(this.formRules);

				this.$nextTick(async () => {
					let valid = await this.$refs.formRef.validate();
					if (valid) {
						//保存数据
						let param = this.form;
						let header = {
							'Content-Type': 'application/json'
						};
						let url = '/demo/table/add';

						if (this.form.id) {
							url = '/demo/table/update';
						}
						uni.showLoading({
							title: '正在保存...'
						});
						let res = await this.$http.post(url, param, header, 'json');
						uni.hideLoading();
						if (res.code == 200) {
							//更新列表数据
							this.listNum = 1;
							this.listApi();
							if (this.form.id) {
								this.showToast('更新成功');
								//关闭窗口
								this.navigateTo({
									type: 'closemodal',
									id: 'modal'
								});
							} else {
								//提示是否继续新增
								let flag = await this.showModal('是否继续新增');
								if (flag) {
									//重置表单
									this.resetForm();
								} else {
									//关闭窗口
									this.navigateTo({
										type: 'closemodal',
										id: 'modal'
									});
								}
							}
						} else {
							this.showModal(res.msg, '提示', false);
						}
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onPullDownRefresh() {
			// 列表数据 API请求方法
			this.listNum = 1;
			this.listApi();

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			// 列表数据 API请求方法
			this.listApi();
		}
	};
</script>

<style lang="scss" scoped>
	.baifangren-clz {
		background-color: #ffffff;
		margin-left: 16rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 16rpx - 16rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 16rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 16rpx;
		margin-right: 16rpx;
	}
	.flex4-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text1-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text4-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text5-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text7-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text8-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text2-clz {
		padding-top: 10rpx;
		color: #7c7c7c;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex2-clz {
		border-top: 2rpx solid #eee;
		padding-top: 10rpx;
		color: #6b6b6b;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text6-clz {
		border: 2rpx solid #038af2;
		padding-top: 10rpx;
		border-bottom-left-radius: 10rpx;
		color: #038af2;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 10rpx;
		margin-right: 10rpx;
		background-color: #f0f1ff;
		margin-left: 10rpx;
		overflow: hidden;
		border-top-left-radius: 10rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 10rpx;
		margin-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.text13-clz {
		border: 2rpx solid #ffb08f;
		padding-top: 10rpx;
		border-bottom-left-radius: 10rpx;
		color: #ff592c;
		padding-left: 20rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 10rpx;
		margin-right: 10rpx;
		background-color: #fff4f0;
		margin-left: 10rpx;
		overflow: hidden;
		border-top-left-radius: 10rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 10rpx;
		margin-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.flex-clz {
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.image-size {
		height: 400rpx !important;
		width: 400rpx !important;
	}
	.text-clz {
		color: #969696;
		font-size: 28rpx !important;
	}
	.modal-clz {
		z-index: 1000000;
	}
	.diygw-dialog-modal {
	}
	.button-button-clz {
		margin: 6rpx !important;
	}
	.flex3-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 0rpx;
		color: #747474;
		bottom: 0rpx;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 20rpx;
		background-color: #ffffff;
		overflow: hidden;
		left: 0rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
		padding-right: 16rpx;
	}
	.flex20-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 200rpx;
		overflow: hidden;
		font-weight: bold;
		padding-left: 10rpx;
		font-size: 28rpx !important;
		padding-bottom: 16rpx;
		border-top-left-radius: 200rpx;
		border-top-right-radius: 200rpx;
		border-bottom-right-radius: 200rpx;
		padding-right: 10rpx;
	}
	.icon2 {
		font-size: 40rpx;
	}
	.container333526 {
		padding-bottom: 160rpx;
		background-color: #f5f5f5;
	}
</style>
